<template>
	<view class="home">
		<!-- swiper -->
		<view id="banner">
			<swiper indicator-dots="true" interval="2000" autoplay='true' circular='true' indicator-active-color='#ccc'
				indicator-color='#fff'>
				<swiper-item>
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u56.png" />
				</swiper-item>
				<swiper-item>
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u60.png" />
				</swiper-item>
				<swiper-item>
					<image
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fimages01%2F20201118%2F7a89e5c96adf450787b74a5bb90e0043.jpeg&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671153826&t=6dba7258451cb6a87c90ae5e5ce13be6" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 店名 -->
		<view class="user-card">
			<view class="info-card">
				<view class="info-card-top">
					<view class="info-card-top-left">
						<image
							src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u65.svg">
						</image>
					</view>
					<view class="info-card-top-middle">
						<text>晓七自习室 - 世贸店</text>
						<text>营业时间：06:00~02:00</text>
					</view>
					<view class="info-card-top-right" >
						<text @click="switch_Stores">切换门店</text>
						<icon class="iconfont icon-24gl-swapHorizontal"></icon>
					</view>
				</view>
				<view class="info-card-bottom">
					<view class="info-card-bottom-left">
						<icon class="iconfont icon-daohangdizhi
						"></icon>
						<text>
							福建省福州市台江区鼓楼街道景江镇天厝路350-5号
							<text class="info-card-bottom-left-text2">距我300m</text>
						</text>

					</view>
					<view class="info-card-bottom-right">
						<icon class="iconfont icon-gaode
						"></icon>
						<icon class="iconfont icon-dianhua-yuankuang
						"></icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 扫码开门 -->
		<view class="open-door">
			<button @click="openDrom">扫码开门</button>
		</view>
		<!-- 常用功能 -->
		<text class="usual-fun-text">常用功能</text>
		<view class="usual-fun">
			<view class="usual-fun-left">
				<text @click="start_booking">我要预约</text>
				<text>支持预约图书馆/会议室/茶室/私人影院、多功能放映厅等等...</text>
				<button @click="start_booking">开始预约</button>
			</view>
			<view class="usual-fun-right">
				<view class="usual-fun-right-top">
					<text @click="recharge">会员充值</text>
					<text>热门活动:冲500送300!</text>
					<button @click="recharge">充值</button>
				</view>
				<view class="usual-fun-right-bottom">
					<view class="usual-fun-right-bottom-left">
						<icon class="iconfont icon-shijian-kong"></icon>
						<text @click="addTimeFn">加时</text>
					</view>
					<view class="usual-fun-right-bottom-right">
						<icon class="iconfont icon-tuichu"></icon>
						<text @click="live_Store">离店</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 使用说明 -->
		<text class="usual-fun-text">使用说明</text>
		<!-- 步骤条 -->
		<view class="steps">
			<button>线上预约</button>
			<image src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u98.svg"></image>
			<button>线下开门</button>
			<image src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u98.svg"></image>
			<button>对号入座</button>
			<image src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u98.svg"></image>
			<button>开灯学习</button>
		</view>
		<!-- 更多门店 -->
		<text class="usual-fun-text">更多门店</text>

		<view class="banner-bottom">
			<scroll-view class="scroll-view" scroll-x="{{true}}">
				<view class="scroll-view-box">
					<view class="scroll-view-img">
						<image
							src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u103.svg" />
					</view>
					<view class="scroll-view-text">
						<text>晓七自习-德福店</text>
						<button @click="start_booking">预约</button>
						<text>福建省福州市台江区景江镇天厝路350-5号距我300m</text>
					</view>
				</view>
				<!-- 2 -->
				<view class="scroll-view-box">
					<view class="scroll-view-img">
						<image
							src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u60.png" />
					</view>
					<view class="scroll-view-text">
						<text>晓七自习-德福店</text>
						<button @click="start_booking">预约</button>
						<text>福建省福州市台江区景江镇天厝路350-5号距我300m</text>
					</view>
				</view>
				<!-- 3 -->
				<view class="scroll-view-box">
					<view class="scroll-view-img">
						<image
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp7.itc.cn%2Fimages01%2F20201123%2Fe521e59a34f04c3d96a37599d66bae15.png&refer=http%3A%2F%2Fp7.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671154662&t=c542d3810018960fbc48af7d65a87b55" />
					</view>
					<view class="scroll-view-text">
						<text>晓七自习-德福店</text>
						<button @click="start_booking">预约</button>
						<text>福建省福州市台江区景江镇天厝路350-5号距我300m</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 更多信息 -->
		<text class="usual-fun-text">更多信息</text>
		<view class="nav-info">
			<view class="nav-info-text">
				<text>关于声音控制</text>
				<text>在自习室内，请自觉保持安静。请控制声量，将手机调成静音状态。如有接电话需求，请移步公共区域。</text>
			</view>
			<view class="nav-info-text">
				<text>关于声音控制</text>
				<text>在自习室内，请自觉保持安静。请控制声量，将手机调成静音状态。如有接电话需求，请移步公共区域。</text>
			</view>
			<view class="nav-info-text">
				<text>关于声音控制</text>
				<text>在自习室内，请自觉保持安静。请控制声量，将手机调成静音状态。如有接电话需求，请移步公共区域。</text>
			</view>
			


			
		</view>
	</view>
</template>

<script setup>
	import {
		addGet,
		addPost
	} from '../../api/portApi.js';
	import {
		ref,
		onMounted,
		computed,
	} from 'vue';
	import {
		useStore
	} from 'vuex';
	const {
		state,
		getter,
		commit,
		dispath
	} = useStore()

	let username = computed(() => {
		return state.username
	})
	let age = computed(() => {
		return state.age
	})
	const title = ref('首页')
	// 预约页面
	const start_booking = ()=> {
		wx.navigateTo({
			url:"../Booking_seat/Booking_seat"
		})
	}
	const addTimeFn = function(){
		wx.navigateTo({
			url:"../AddTime/AddTime"
		})
	}
	let openDrom =()=>{
		uni.showLoading({
			title: '开门中...',
			mask: true,
		});
		setTimeout(function() {
			wx.showToast({
				title: '开门成功',
				icon: 'success',
				duration: 2000, //持续的时间,
			})
			uni.hideLoading();
		}, 2000);
	}
		// 切换门店
	const switch_Stores =()=>{
		wx.navigateTo({
			url:"../Store/Store"
		})
	}
	// 离店
	const live_Store =()=>{
		wx.navigateTo({
			url:"../Departure/Departure"
		})
	}
	// 充值
	const recharge=()=>{
		wx.navigateTo({
			url:"../RechargeWallet/RechargeWallet"
		})
	}
	// onMounted(()=>{
	// 	let data = {
	// 		id:'1',
	// 		name:'AAQ'
	// 	}
	// 	addGet(data).then((res)=>{
	// 		console.log('成功')
	// 	})
	// 	// 2.或者
	// 	addPost({
	// 		id:'1',
	// 		name:'AAQ'
	// 	}).then((res)=>{
	// 			console.log('成功')
	// 	})
	// })

</script>

<style scoped lang="less">
	@import url('@/static/fonts/iconfont.css');

	.home {
		& #banner {
			width: 750rpx;
			height: 450rpx;

			& swiper {
				width: 100%;
				height: 450rpx;
			}

			& swiper image {
				width: 100%;
				height: 100%;
			}
		}

		// 用户卡片
		& .user-card {
			// border: 1px solid red;
			box-sizing: border-box;
			margin-top: 20rpx;
			width: 750rpx;
			height: 300rpx;
			display: flex;
			justify-content: center;


			& .info-card {
				// outline: 1px solid green;
				width: 680rpx;
				height: 100%;
				box-sizing: border-box;
				padding: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 10rpx;
				box-shadow: 0 0 30rpx #aaa;


				& .info-card-top {
					width: 100%;
					height: 50%;
					background-color: #fffefe;
					display: flex;
					justify-content: center;

					& .info-card-top-left {
						height: 100%;
						flex: 1;
						text-align: center;

						& image {
							display: inline-block;
							width: 130rpx;
							height: 130rpx;
							vertical-align: middle;
						}
					}

					& .info-card-top-middle {
						height: 100%;
						flex: 2;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						& text:nth-child(1) {
							padding-top: 20rpx;
							padding-left: 20rpx;
							display: block;
							color: #333333;
							font-weight: bold;
						}

						& text:nth-child(2) {
							display: block;
							color: #ababab;
							font-size: 22rpx;
							padding-left: 20rpx;
							padding-bottom: 20rpx;
						}
					}

					& .info-card-top-right {
						height: 100%;
						flex: 1;
						font-size: 28rpx;
						color: #bd8f4b;
						font-weight: bolder;
						text-align: right;
						line-height: 150rpx;
						padding-right: 10rpx;
						// outline: 1px solid red;

						& span {
							margin-left: 10rpx;
						}
					}
				}

				& .info-card-bottom {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: center;

					& .info-card-bottom-left {
						height: 100%;
						flex: 3;
						// background-color: yellowgreen;
						display: flex;
						box-sizing: border-box;
						line-height: 60rpx;

						& icon {
							display: block;
							color: #7f7f7f;
							padding-top: 6rpx;
						}

						& text {
							padding-top: 12rpx;
							padding-left: 10rpx;
							color: #7f7f7f;
							font-size: 28rpx;
							position: relative;

							& .info-card-bottom-left-text2 {
								position: absolute;
								right: 8rpx;
								bottom: 4rpx;
								color: #adadad;
							}
						}


					}

					& .info-card-bottom-right {
						height: 100%;
						flex: 1;
						display: flex;
						justify-content: space-between;
						// background-color: #aaa;

						& icon:nth-child(1) {
							margin-left: 20rpx;
							text-align: center;
							line-height: 100rpx;
							color: #c6964f;
							font-size: 52rpx;
						}

						& icon:nth-child(2) {
							text-align: center;
							line-height: 100rpx;
							color: #c6964f;
							font-size: 58rpx;
						}

					}
				}
			}
		}

		// 开门按钮
		& .open-door {
			width: 750rpx;
			height: 100rpx;
			margin-top: 30rpx;
			padding: 0 36rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;

			&>button {
				display: inline-block;
				width: 100%;
				margin: 0;
				padding: 0;
				background: #c6964f;
				color: #fffefe;
				border-radius: 20rpx;
				box-shadow: 0 0 30rpx #aaa;
			}
		}

		// 常用功能
		& .usual-fun-text {
			display: block;
			margin: 30rpx 40rpx;
			font-size: 36rpx;
			color: #333333;
		}

		& .usual-fun {
			width: 750rpx;
			height: 400rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;

			& .usual-fun-left {
				flex: 1;
				background-color: #f4debe;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 20rpx;
				border-radius: 30rpx;
				box-shadow: 0 0 30rpx #7f7f7f;
				margin-right: 20rpx;

				& text {
					display: block;
				}

				& text:nth-child(1) {
					font-weight: bold;
					font-size: 36rpx;
					color: #ae731a;
					text-decoration: underline;
				}

				& text:nth-child(2) {
					font-size: 26rpx;
					color: #ae731a;
					line-height: 40rpx;
				}

				& button {
					height: 78rpx;
					display: inline-block;
					text-align: center;
					line-height: 78rpx;
					margin: 0;
					padding: 0;
					border-radius: 50rpx;
					background: #c6964f;
					color: #fffefe;
				}

			}

			& .usual-fun-right {
				flex: 1;
				border-radius: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;


				& .usual-fun-right-top {
					width: 100%;
					height: 200rpx;
					border-radius: 20rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					padding: 10rpx;
					background: #f4debe;

					& text {
						display: block;
						line-height: 88rpx;
						background: ;
					}

					& text:nth-child(1) {
						font-weight: bold;
						font-size: 36rpx;
						color: #ae731a;
						text-decoration: underline;
					}

					& text:nth-child(2) {
						font-size: 28rpx;
						color: #b6802d;
						line-height: 40rpx;
						margin-top: 20rpx;
					}

					& button {
						margin: 0;
						padding: 0%;
						width: 120rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 50rpx;
						background: #c6964f;
						color: #fffefe;
						position: absolute;
						right: 6rpx;
						top: 30rpx;
					}
				}

				& .usual-fun-right-bottom {
					width: 100%;
					height: 200rpx;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					align-items: flex-end;

					& icon {
						display: block;
					}

					& .usual-fun-right-bottom-left {
						width: 120rpx;
						height: 120rpx;
						background-color: #f4debe;
						margin-right: 20rpx;
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-radius: 20rpx;
						padding: 10rpx;

						& icon {
							font-weight: bold;
							font-size: 68rpx;
							color: #ae731a;
						}

						& text {
							font-weight: bold;
							text-decoration: underline;
							color: #ae731a;
						}
					}

					& .usual-fun-right-bottom-right {
						width: 120rpx;
						height: 120rpx;
						background-color: #e6e4e4;
						margin-left: 20rpx;
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-radius: 20rpx;
						padding: 10rpx;

						& icon {
							font-weight: bold;
							font-size: 68rpx;
							;
							color: #555555;
						}

						& text {
							font-weight: bold;
							color: #555555;
							text-decoration: underline;
						}
					}
				}


			}
		}

		// 步骤条
		& .steps {
			width: 670rpx;
			height: 100rpx;
			// background: #ccc;
			margin: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;
			align-items: center;
			& button{
				display: inline-block;
				width: 120rpx;
				height: 60rpx;
				margin: 0;
				padding: 0;
				line-height: 60rpx;
				background: #555555;
				color: #ffffff;
				font-size: 24rpx;
			}
			& image{
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}
		}

		// 更多门店
		& .banner-bottom {
			width: 670rpx;
			height: 550rpx;
			margin:0 40rpx;

			& scroll-view {
				width: 100%;
				height: 540rpx;
				// outline: 2px solid blue;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				white-space: nowrap;
				
				
				& .scroll-view-box{
					width: 600rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					display: inline-block;
					margin: 0 10rpx;

					
					& .scroll-view-img {
						width: 100%;
						height: 75%;
			
						& image {
							// display: inline-block;
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
			
					& .scroll-view-text {
						position: relative;
						
						& text {
							display: block;
							padding:6rpx ;
						}
									
						& text:nth-child(1) {
							font-size: 36rpx;
							color: #333333;
						}
									
						& button {
							width: 100rpx;
							height: 40rpx;
							margin: 0;
							padding: 0;
							line-height: 40rpx;
							background: #c6964f;
							color: #f7f1e8;
							position: absolute;
							right:10rpx;
							top:10rpx;
							font-size: 22rpx;
							border-radius: 50rpx;
						}
									
						& text:nth-child(3) {
							font-size: 22rpx;
							color: #7f7f7f;
							
						}
					}
			
					
				}
			
			}
		}

				
		// 更多信息
		& .nav-info{
			width: 670rpx;
			height: 600rpx;
			margin: 0 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			background: #f2f2f2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			& text{
				display: block;
			}
			& .nav-info-text{
				flex: 1;
				padding: 20rpx;
				// outline: 1px solid red;
				line-height: 50rpx;
				
				& text:nth-child(1){
					color:#7f7f7f;
					font-size: 28rpx;
					font-weight: bold;
				}
				& text:nth-child(2){
					color: #b9b9b9;
					font-size: 22rpx;
				}
			}
			
		}

	}
</style>
